{% extends "base.html" %}
<script type="text/javascript" src="/static/js/jquery.treeview.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
{% block header %}
<link rel="stylesheet" type="text/css" href="/media/css/forms.css">
<script type="text/javascript" src="/static/js/jquery.treeview.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/js/date/WdatePicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    searchHide();

    {% if merge == 'on' %}
        $('#merge').attr('checked', true);
    {% endif %}
    {% if notreplay == 'on' %}
        $('#notreplay').attr('checked', true);
    {% endif %}
        $('#start').val("{{start}}");
        $('#end').val("{{end}}");


        $('#reason-choose').hide()
        $('#reason').hide();

	    $("#browser").treeview({
            collapsed:true,
            //unique: true,
            persist: "cookie",
			toggle: function() {
				console.log("%s was toggled.", $(this).find(">span").text());
			}
		});

});


function searchShow(){
    $('#f').show();
}


function searchHide(){
    $('#f').hide();
}

function doit(){
    var ac = $('#action-choose').val();
    if (!ac){
        alert('请选择操作！');
        return false;
    }
    
    var ids = "";
    $("input[name='alertchoose']").each(function() { 
        if($(this).attr("checked") == true)
         ids += " " + $(this).attr("value");
    });
    if(!ids){
        alert('您没有选中报警！');
        return false;
    }

    if( ac == '回复'){
        var rt = $('#reason-choose').val();    
        if(!rt){
            alert('请输入故障原因！');
            return false;
        }
        reason = ''
        if(rt == '其他'){
            reason = $('#reason').text();
            if(!reason){
                alert('请输入故障原因！');
                return false;
            }
        
        }
       $.post("/alert/ajaxreplay/", {'ids': ids, 'rtype': rt,  'reason': reason}, function(data){
            if(data['flag'] == 'succ'){
                alert("操作成功!");
                top.document.location.reload();
            }else{
                alert("操作失败!");
            }
       }, type='json');
        
    }
    

    if( ac == '删除'){
        $.post("/alert/ajaxdel/", {'ids': ids,}, function(data){
            if(data['flag'] == 'succ'){
                alert("操作成功!");
                top.document.location.reload();
            }else{
                alert("操作失败!");
            }
       }, type='json');
 
    }
}



function chooseall(){
    if($('#chooseall').attr("checked") == true) {
        $("input[name='alertchoose']").each(function() {   
            $(this).attr("checked", true);   
        }); 
    } else {
        $("input[name='alertchoose']").each(function() {   
        $(this).attr("checked", false);   
        //alert($(this).attr('value'));
        });
    }    
}

function settime(n){
    $('#start').val(gettime(n));
    $('#end').val(gettime(0));

}

function gettime(n){
    var now = new Date();
    var day  = now.getDay();
    now.setDate(now.getDate() - n);
    var s = now.getFullYear() + '-' + (now.getMonth()+1) + '-' + now.getDate();
    return s;
}

function checkinput(){
    if(!$('#start').val()){
        alert("起始时间不能为空！");
        $('#start').focus();
        return false;
    }

    if(!$('#end').val()){
        alert("起始时间不能为空！");
        $('#end').focus();
        return false;
    }
    return true;
}

function showreplay(){
    var value = $('#action-choose').val();
    if(value == '回复'){
        $('#reason-choose').show()
    }else{
        $('#reason-choose').hide()
    }
}

function showreason(){
    var value = $('#reason-choose').val();
    if(value == '其他'){
        $('#reason').show();
    }else{
        $('#reason').hide();
    }
}
</script>
{% endblock %}

{% block menu %}
    {% include "alert-menu.html" %}
{% endblock %}

{% block aside %}
<div class='left-col'>
{% autoescape off %}
    {{ tree }}
{% endautoescape %}
</div>
{% endblock %}
{% block content %}
	<div id="mon-tit">
	    <div class="left">报警管理 >> 报警列表</div> <div style="float:right"><a href='/alert/people'>报警修改</a></div>
	</div>
	<div class="clr"></div>
	<hr />
	<h3 class="tit">故障历史汇总
    <span>
		<a href="/alert/export">导出</a> | 
		<a href="javascript:searchShow();">展开</a>
    </span>
    </h3>
	<div id="f" style="margin-bottom:5px">
		<form method="post" action="/alert/search/" onSubmit="return checkinput()" >
			开始时间：<input class="Wdate" id="start" name="start" type="text" onClick="WdatePicker()">&nbsp;&nbsp;
			结束时间：<input class="Wdate" id="end" name="end" type="text" onClick="WdatePicker()">&nbsp;&nbsp;
            <a href='javaScript:settime(0)'>今天</a> |
            <a href='javaScript:settime(7)'>本周</a>&nbsp;|&nbsp;
            <label>主机合并 </label><input type="checkbox"  name='merge' id='merge' />&nbsp;&nbsp;&nbsp;&nbsp;
            <label>未处理 </label><input type="checkbox"  name='notreplay' id='notreplay' />&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="submit" style="width:95px" value="查询">
			<input type="button" onclick="javascript:searchHide();" style="float:right" value="收起">
		</form>
	</div>
	<div  class="flow-dis">
	    <div class="title">
            {% if merge == 'off' %} 
            <span style='width:4%'>选择</span>
            {% endif %}
	        <span style="width:15%">最后报警时间</span>
	        <span style="width:20%">监控名称</span>
	        <span style="width:22%">主机名称</span>
	        <span style="width:10%">持续时间</span>
            {% if merge == 'on' %}
	        <span style="width:10%">报警次数</span>
            {% endif %}
	        <span style="width:7%">目前状态</span>
	        <span style="width:8%">故障原因</span>
	        <span style="width:8%">处理人</span>
	    </div>
	  {% for alt in  uniqAlert %}
	    <div class="{% cycle 'ji' 'ou' %}">
            {% if merge == 'off' %} 
            <span style="width:4%"><input type="checkbox" name='alertchoose' class='alerts' value='{{alt.id}}' /></span>
            {% endif %}
	        <span style="width:15%">{{ alt.timestamp|date:"Y-m-d H:i:s" }}</span>
	        <span style="width:20%"><a href='/monitor/monitorview/{{alt.mid.id}}'>{{ alt.mid.mname }}</a></span>
	        <span style="width:22%"><a href='/alert/?id={{alt.mid.id}}&merge=off'>{{ alt.mid.hid.ip }}</a></span>
        {% if alt.downtime > 300 %} 
	        <span style="width:10%;text-align:center;color:red">{{ alt.downtime }}s</span>
        {% else %}
	        <span style="width:10%;text-align:center">{{ alt.downtime }}s</span>
        {% endif %}
        {% if merge == 'on' %}
            {% if alt.num < 5 %}
	        <span style="width:10%">{{ alt.num }}</span>
            {% else %}
	        <span style="width:10%"><font color='red'>{{ alt.num }}</font></span>
            {% endif %}
        {% endif %}
	        <span style="width:7%">{{ alt.mid.status }}</span>
	        <span style="width:8%"> 
	            {% if alt.rtype %}
	            <a href='/alert/reason/{{ alt.id }}'><font color='green'>{{alt.rtype}}</font></a>
	            {% else %}
	            <a href='/alert/replay/{{ alt.id }}'>回复</a>
	            {% endif %}
	        </span>
	        <span style="width:8%">{{alt.uid}}</span>
	    </div>
	{% endfor %}
    <div class='clr'></div>
    {% if merge == 'off' %}
    <div style="margin-top:4px">
        <div class='actions'>
            <span style='width:4%'>
            <input type="checkbox" id='chooseall' onclick="chooseall()" />
            <select name="action-choose" id="action-choose" style="width:200px" onchange="javascript:showreplay();">
                <option selected="selected" value="">---------</option>
                <option value="回复">回复</option>
                <option value="删除">删除</option>
            </select>
             <select name="reason-choose" id="reason-choose" style="width:200px" onchange="javascript:showreason()">
                <option selected="selected" value="">---------</option>
                <option value="闪断">闪断</option>
                <option value="程序BUG">程序BUG</option>
                <option value="人为操作">人为操作</option>
                <option value="负载过大">负载过大</option>
                <option value="网络故障">网络故障</option>
                <option value="其他">其他</option>
            </select>
            <button class="button" style="float:right;width:95px" value="0" name="index"  onclick="javascript:doit()" type="submit">执行</button>
            </span>
        </div>
        <div id="reason" class="form-row">
            <label >故障原因</label></br>
            <textarea name="hid" cols="120" rows="10"></textarea>
        </div>
    </div>
    {% endif %}
    </br>
    </br>
	</div>
{% endblock %}
